<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    #container {
      padding-left: 200px;
      padding-right: 150px;
      overflow: auto;
    }
    #container p {
      float: left;
    }
    .center {
      width: 100%;
      background-color: lightcoral;
    }
    .left {
      width: 200px;
      position: relative;
      left: -200px;
      margin-left: -100%;
      background-color: lightcyan;
    }
    .right {
      width: 150px;
      margin-right: -150px;
      background-color: lightgreen;
    }
    .clearfix:after {
      content: "";
      display: table;
      clear: both;
    }
    /*
      上述代码中 margin-left: -100%
      相对的是父元素的 content  宽度，即不包含 padding 、 border  的宽度。
    */
  </style>
</head>
<body>
<!--
  圣杯布局和双飞翼布局的目的：

  三栏布局，中间一栏最先加载和渲染（内容最重要，这就是为什么还需要了解这种布局的原因）。
  两侧内容固定，中间内容随着宽度自适应。
  一般用于 PC 网页。

  圣杯布局和双飞翼布局的技术总结：

  使用 float 布局。
  两侧使用 margin 负值，以便和中间内容横向重叠。
  防止中间内容被两侧覆盖，圣杯布局用 padding，双飞翼布局用 margin。
-->
<div id="container" class="clearfix">
  <p class="center">三栏布局，中间一栏最先加载和渲染 中间内容随着宽度自适应。</p>
  <p class="left">两侧内容固定</p>
  <p class="right">两侧内容固定</p>
</div>
</body>
</html>
